<template>
	
	<h3>已删除邮件</h3>
	<el-divider />
	
	<el-table :data="subinbox"
		          :default-sort="{ prop: 'time', order: 'ascending' }" 
				  stripe 
				  border 
				  fit
				  empty-text="暂时没有删除邮件"
				  @selection-change="handleSelectionChange"
				  style="width: 100%">
			<el-table-column type="selection" width="55" />
		    <el-table-column prop="sender" label="发件人" width="100" />
		    <el-table-column prop="title" label="主题" width="250" />
		    <el-table-column prop="time" label="收信时间" />
			<el-table-column>
				<template #default="scope">
					<el-button @click="openEmail(scope.row)">
					    查看详情
					</el-button>
					
					<el-button @click="saveDelete(scope.row.id)">
				        恢复
				    </el-button>
				</template>
			</el-table-column>
		  </el-table>
	
	
	<el-row>
		<el-col :span="8"></el-col>
		<el-col :span="16">
		  <el-pagination 
		  background layout="prev, pager, next" 
		  :page-size="pageSize" 
		  :total="inbox.length" 
		  @current-change="doPaging"
		  />
		</el-col>
	</el-row>
	 
	 
	 <!-- 查看邮件对话框 -->
	 <el-dialog v-model="emailDialogFormVisble" title="邮件详情">
	 		  <el-form
	 		  :label-position="labelPosition"
	 		  label-width="100px"
	 		  style="max-width: 350px;margin: 0px auto;"
	 		  >
	 		  <el-form-item label="发件人:">
	 			  {{checkEmail.sender}}
	 		  </el-form-item>
	 		  <el-form-item label="主题:">
	 			  {{checkEmail.title}}
	 		  </el-form-item>
	 		  <el-form-item label="正文:">
	 			  {{checkEmail.main}}
	 		  </el-form-item>
	 		      <el-button @click="emailDialogFormVisble=false">关闭</el-button>
	 			  
	 			  
	 		  </el-form>
	 		  
	 </el-dialog>
	 
	 
	 
	
	</template>
	
	<script>
		import { ElMessage } from 'element-plus'
	    export default {
			data(){
				return {
					news:[],
					inbox:[],
					subinbox:[],
					emailsidArr:[],
					pageSize:4,
					emailDialogFormVisble:false,
					checkEmail:{}
				}
			},
			methods: {
				//显示数据库内容
				getSQL(){
					let that=this
					this.$axios.get("http://localhost:8080/inbox/deletelist").then(function(res){
							that.inbox=res.data
							//默认第一页
							that.subinbox=that.inbox.slice(0,that.pageSize)
						})
				},
				
				//分页
				doPaging(curr){
					//根据当前页 推算显示第几到第几行数据
					let start=(curr-1)*this.pageSize
					let end=curr*this.pageSize
					this.subinbox=this.inbox.slice(start,end)
					
				},
				cancelSign(eid){
					let that=this
					this.$axios.get("http://localhost:8080/inbox/cancelsign",{
						params:{
							emailid:eid
						}
					}).then(function(res){
						if(res.data==true)
						{
							ElMessage({
							    message: '标记已取消！',
							    type: 'success',
							  })
							  that.getSQL()
							  
						}
						else{
							ElMessage.error('标记失败！')
						}
						
					})
					
				},
				openEmail(row){
					this.checkEmail=row
					this.emailDialogFormVisble=true
					
				},
				//删除单个数据
				saveDelete(eid){
					let that=this
					this.$axios.get("http://localhost:8080/inbox/canceldelete",{
						params:{
							emailid:eid
						}
					}).then(function(res){
						if(res.data==true)
						{
							ElMessage({
							    message: '恢复成功！',
							    type: 'success',
							  })
							  that.getSQL()
							  
						}
						else{
							ElMessage.error('恢复失败！')
						}
						
					})
				},
				
				//多选框
				handleSelectionChange(arr){
					this.emailsidArr=arr
				},
				
				
			},
			created(){
				this.getSQL()
	
			}
			
		}
	
	</script>
	
	<style>
		h3 {
			text-align: left;
			margin-top:0px;
			
		}
		
		
	</style>